<template>
  <el-dialog :title="title" :visible.sync="visible" width="1300px" append-to-body>
  <div class="app-container">
    <el-table v-loading="loading" :data="tableData">
      <el-table-column width="100" label="姓名" align="center" prop="cutmName">
        <template slot-scope="scope">
          <el-input v-model="scope.row.cutmName" clearable style="width: 90px"/>
        </template>
      </el-table-column>
      <el-table-column width="110" label="联系电话" align="center" prop="mobileTelNum">
        <template slot-scope="scope">
          <el-input v-model="scope.row.mobileTelNum" clearable style="width: 240px"/>
        </template>
      </el-table-column>
      <el-table-column width="50" label="性别" align="center" prop="genderCd">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.genderCd"
            placeholder=""
            clearable
            style="width: 70px"
          >
            <el-option value="0" label="女"></el-option>
            <el-option value="1" label="男"></el-option>
          </el-select>
<!--          {{ scope.row.genderCd == 1 ? '男' : '女' }}-->
        </template>
      </el-table-column>
      <el-table-column width="50" label="类型" align="center" prop="ageType">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.ageType"
            placeholder=""
            clearable
            style="width: 70px"
          >
            <el-option value="1" label="成人"></el-option>
            <el-option value="2" label="儿童"></el-option>
          </el-select>
<!--          {{ scope.row.isNeedSign == 1 ? '成人' : '儿童' }}-->
        </template>
      </el-table-column>
      <el-table-column width="150" label="证件类型" align="center" prop="certiType">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.certiType"
            placeholder=""
            clearable
            style="width: 100px"
          >
            <el-option value="身份证" label="身份证"></el-option>
            <el-option value="护照" label="护照"></el-option>
          </el-select>
<!--          <el-input v-model="scope.row.certiType" clearable style="width: 240px"/>-->
        </template>
      </el-table-column>
      <el-table-column width="180" label="证件号码" align="center" prop="certiCode">
        <template slot-scope="scope">
          <div :class="validateIdCard(scope.row.certiCode)">
            <el-input v-model="scope.row.certiCode" clearable style="width: 240px;"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" align="center" prop="birthday">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.birthday"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="date"
          ></el-date-picker>

        </template>
      </el-table-column>
      <el-table-column label="是否需要签署" align="center" prop="isNeedSign">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.isNeedSign"
            placeholder=""
            clearable
            style="width: 70px"
          >
            <el-option :value="2" label="否"></el-option>
            <el-option :value="1" label="是"></el-option>
          </el-select>
<!--          {{ scope.row.isNeedSign == 1 ? '是' : '否' }}-->
        </template>
      </el-table-column>
      <el-table-column label="联系地址" align="center" prop="contractLocation">
        <template slot-scope="scope">
          <el-input v-model="scope.row.contractLocation" clearable style="width: 240px"/>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" clearable style="width: 240px"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="130">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.isNeedSign==1"
            icon="el-icon-edit"
            @click="handecontractResend(scope.row)"
          >重发短信
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="updateById(scope.row)"
          >修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
  </el-dialog>
</template>

<script>
import {pageList,updateById} from "@/api/salepurchase/travelperson"
import {econtractResend} from "@/api/tool/tourism"
export default {
  name: "travelperson",
  components: {},
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      visible: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      ycContract:'',
      sendSms:{
        contractNumber:'',
        phone: ''
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        saleOrderId: '',
      },
      inputColor:'red',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    open(saleOrderId,ycContract) {
      this.sendSms.contractNumber=ycContract
      this.queryParams.saleOrderId=saleOrderId
      this.visible = true
      this.title = "人员名单"
      this.getList()
    },
    getList() {
      this.loading = true
      pageList(this.queryParams).then(response => {
          this.tableData = response.rows
          this.total = response.total
          this.loading = false
        }
      )
    },
    updateById(row) {
      this.loading = true
      updateById(row).then(response => {
        this.$modal.msgSuccess("修改成功")
        this.getList()
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    handecontractResend(data) {
      this.sendSms.phone=data.mobileTelNum
      this.$modal.confirm('确认发送').then(function () {
        return econtractResend(this.sendSms)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("发送成功")
      }).catch(() => {
      })

    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    validateIdCard(sId) {
      // 定义身份证号码的正则表达式
      var isCard='black';
      const aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };
      var iSum = 0;
      if (!/^\d{17}(\d|X|x)$/i.test(sId)) isCard='red';
      sId = sId.replace(/x$/i, "a");
      if (aCity[parseInt(sId.substr(0, 2))] == null) isCard='red';
      var sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
      var d = new Date(sBirthday.replace(/-/g, "/"));
      if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) isCard='red';
      for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
      if (iSum % 11 != 1) isCard='red';
      //aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女");//此次还可以判断出输入的身份证号的人性别
      //return true;


      // if (checkIdCard(id)) {
      //   return "black"; // 身份证号码格式正确
      // } else {
      //   return "red"; // 身份证号码格式不正确
      // }
      return isCard
    },



  }
}
</script>
<style lang="scss" scoped>
.black input::placeholder{
  color: #1e1e1e!important;
}
.red::v-deep input{
  color: red!important;
}
</style>
